<template>
    <div class="topo-editor-wrap" :style="{ height: contentHeight + 'px' }">
        <el-container class="container-wrap">
            <el-header class="header-wrap" height="70">
                <div class="left-wrap">
                    <el-button type="text" @click="handelClick(3)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_copy.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-0') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(4)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_delete.png" />
                            <span class="name">{{ $t('del') }}</span>
                        </div>
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handelClick(13)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_top.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-1') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(14)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_bottom.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-2') }}</span>
                        </div>
                    </el-button>
                    <el-dropdown class="ml10" @command="handleCommand">
                        <el-button type="text">
                            <div class="btn-wrap">
                                <img width="24" height="24" src="@/assets/topo-img/images/editor_revolve.png" />
                                <span class="name">{{ $t('scada.topo.editor.023345-3') }}</span>
                            </div>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus" :command="$t('scada.topo.editor.023345-4')">{{ $t('scada.topo.editor.023345-4') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-minus" :command="$t('scada.topo.editor.023345-5')">{{ $t('scada.topo.editor.023345-5') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-d-arrow-left" :command="$t('scada.topo.editor.023345-6')">{{ $t('scada.topo.editor.023345-6') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-d-arrow-right" :command="$t('scada.topo.editor.023345-7')">{{ $t('scada.topo.editor.023345-7') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-edit" :command="$t('scada.topo.editor.023345-8')">{{ $t('scada.topo.editor.023345-8') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown class="ml10" @command="handleCommandAlign">
                        <el-button type="text">
                            <div class="btn-wrap">
                                <img width="24" height="24" src="@/assets/topo-img/images/editor_align.png" />
                                <span class="name">{{ $t('scada.topo.editor.023345-9') }}</span>
                            </div>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-arrow-left" :command="$t('scada.topo.editor.023345-10')">{{ $t('scada.topo.editor.023345-10') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-arrow-right" :command="$t('scada.topo.editor.023345-11')">{{ $t('scada.topo.editor.023345-11') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-arrow-up" :command="$t('scada.topo.editor.023345-12')">{{ $t('scada.topo.editor.023345-12') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-arrow-down" :command="$t('scada.topo.editor.023345-13')">{{ $t('scada.topo.editor.023345-13') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-d-arrow-left" :command="$t('scada.topo.editor.023345-14')">{{ $t('scada.topo.editor.023345-14') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-d-arrow-right" :command="$t('scada.topo.editor.023345-15')">{{ $t('scada.topo.editor.023345-15') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-sort" :command="$t('scada.topo.editor.023345-38')">{{ $t('scada.topo.editor.023345-15') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-sort" :command="$t('scada.topo.editor.023345-39')">{{ $t('scada.topo.editor.023345-15') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-dropdown class="ml10" @command="handleCommandMakeUP">
                        <el-button type="text">
                            <div class="btn-wrap">
                                <img width="24" height="24" src="@/assets/topo-img/images/editor_combination.png" />
                                <span class="name">{{ $t('scada.topo.editor.023345-16') }}</span>
                            </div>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-connection" :command="$t('scada.topo.editor.023345-16')">{{ $t('scada.topo.editor.023345-16') }}</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-link" :command="$t('scada.topo.editor.023345-17')">{{ $t('scada.topo.editor.023345-17') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-divider direction="vertical"></el-divider>
                    <el-button v-if="isLock" type="text" @click="handleLock($t('scada.topo.editor.023345-18'))">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_unlock.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-18') }}</span>
                        </div>
                    </el-button>
                    <el-button v-else type="text" @click="handleLock($t('scada.topo.editor.023345-19'))">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_lock.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-19') }}</span>
                        </div>
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handelClick(6)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_gallery.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-20') }}</span>
                        </div>
                    </el-button>
                    <el-button v-if="scadaType == 3" type="text" @click="handelClick(8)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_device_binding.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-21') }}</span>
                        </div>
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handelClick(18)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_import.png" />
                            <span class="name">{{ $t('import') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(19)">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_export.png" />
                            <span class="name">{{ $t('export') }}</span>
                        </div>
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="handelClick(16)" :disabled="isRevoke">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_quash.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-22') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(17)" :disabled="isRecovery">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_reflesh.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-23') }}</span>
                        </div>
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-dropdown class="ml10" @command="handleCommandZoom">
                        <el-button type="text">
                            <span class="btn-wrap">
                                <i style="color: #303133; height: 20px; font-weight: 550" size="100">{{ zoom }}%</i>
                                <span class="name">{{ $t('scada.topo.editor.023345-24') }}</span>
                            </span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="25">25%</el-dropdown-item>
                            <el-dropdown-item command="50">50%</el-dropdown-item>
                            <el-dropdown-item command="75">75%</el-dropdown-item>
                            <el-dropdown-item command="100">100%</el-dropdown-item>
                            <el-dropdown-item command="125">125%</el-dropdown-item>
                            <el-dropdown-item command="150">150%</el-dropdown-item>
                            <el-dropdown-item command="175">175%</el-dropdown-item>
                            <el-dropdown-item command="200">200%</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="right-wrap">
                    <el-tag v-if="!isSave" style="margin-right: 20px" type="danger" size="small">{{ $t('scada.topo.editor.023345-43') }}</el-tag>
                    <el-button type="text" @click="handelClick(1)" v-hasPermi="['scada:center:edit']">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_save.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-42') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(2)" v-hasPermi="['scada:center:preview']">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_preview.png" />
                            <span class="name">{{ $t('preview') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelClick(20)" v-hasPermi="['scada:center:share']">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_share.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-40') }}</span>
                        </div>
                    </el-button>
                    <el-button type="text" @click="handelHelpClick">
                        <div class="btn-wrap">
                            <img width="24" height="24" src="@/assets/topo-img/images/editor_help.png" />
                            <span class="name">{{ $t('scada.topo.editor.023345-25') }}</span>
                        </div>
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside class="aside-wrap left-aside-open" :class="{ 'aside-close': !leftAsideStatus }" :style="{ height: asideHeight + 'px' }">
                    <topo-toolbox ref="topoToolbox" class="topoToolbox-item" />
                </el-aside>
                <el-container :style="{ height: asideHeight + 'px' }">
                    <el-main class="main-wrap">
                        <!-- 侧边框按钮 -->
                        <div class="left-aside-close-btn" @click="leftAsideChange">
                            <i class="el-icon-arrow-left" v-if="leftAsideClose"></i>
                            <i class="el-icon-arrow-right" v-else></i>
                        </div>
                        <div class="right-aside-close-btn" @click="rightAsideChange">
                            <i class="el-icon-arrow-right" v-if="rightAsideClose"></i>
                            <i class="el-icon-arrow-left" v-else></i>
                        </div>
                        <topo-main
                            ref="topoMain"
                            @menuClick="menuClick"
                            @lockStatusChange="handleLockStatus"
                            @recoveryFlagClick="recoveryFlagClick"
                            @revokeFlagClick="revokeFlagClick"
                            @onLayerWheel="handleLayerWheel"
                            @selectComponentChange="handleSelectComponen"
                        />
                    </el-main>
                </el-container>
                <el-aside class="aside-wrap right-aside-open" :class="{ 'aside-close': !rightAsideStatus }" :style="{ height: asideHeight + 'px' }">
                    <topo-properties ref="topoProperties" class="topoProperties" :layerActiveIndex="selectedIndex" @lockStatusChange="handleLockStatus" @layerItemChange="handleLayerItem" />
                </el-aside>
            </el-container>
        </el-container>

        <el-dialog :title="$t('scada.topo.editor.023345-26')" :visible.sync="isImgDialog" width="1100px" :close-on-click-modal="false" v-dialogDrag>
            <div class="el-divider el-divider--horizontal" style="margin-top: -25px"></div>
            <topo-select-image ref="topoSelectImage" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="isImgDialog = false">{{ $t('scada.topo.editor.023345-41') }}</el-button>
                <el-button type="primary" @click="selectImageClick">{{ $t('select') }}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('scada.topo.editor.023345-21')" :visible.sync="isDeviceBindDialog" width="700px" :close-on-click-modal="false">
            <device-bind ref="deviceBind" />
        </el-dialog>
        <!-- 分享对话框 -->
        <scada-share-dialog ref="scadaShareDialog" :guid="scadaGuid" :type="scadaType" :productId="productId" :visible.sync="isScadaShare"></scada-share-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';

import TopoToolbox from './components/topoToolbox';
import TopoMain from './components/topoMain';
import TopoProperties from './components/topoProperties';
import TopoSelectImage from './components/topoSelectImage';
import DeviceBind from './components/deviceBind/index';
import ScadaShareDialog from '@/views/scada/common/ScadaShareDialog/index.vue';

export default {
    name: 'TopoEditor',
    components: {
        TopoToolbox,
        TopoMain,
        TopoProperties,
        TopoSelectImage,
        DeviceBind,
        ScadaShareDialog,
    },
    computed: {
        ...mapState({
            isSave: (state) => state.topoEditor.isSave,
        }),
    },
    data() {
        return {
            baseApi: process.env.VUE_APP_BASE_API,
            scadaGuid: this.$route.query.guid, // 组态guid
            scadaType: Number(this.$route.query.type), // 组态类型
            productId: Number(this.$route.query.productId),
            leftAsideStatus: true,
            leftAsideClose: true,
            rightAsideStatus: true,
            rightAsideClose: true,
            asideHeight: window.innerHeight,
            isLock: false, // 锁定/解锁
            isImgDialog: false, // 图库对话框
            isDeviceBindDialog: false, // 设备对话框
            isRevoke: true, // 撤销
            isRecovery: true, // 恢复
            zoom: 100, // 缩放大小
            contentHeight: window.innerHeight,
            selectedValue: 100,
            isScadaShare: false, // 是否分享组态
            selectedIndex: null, // 选中组件序号
        };
    },
    mounted() {
        this.calculateAsideHeight();
        window.addEventListener('resize', this.calculateAsideHeight, true);
        window.addEventListener('keydown', this.handleKeyDown);
        this.calculateContentHeight();
        window.addEventListener('resize', this.calculateContentHeight, true);
    },
    methods: {
        calculateContentHeight() {
            let originalHeight = document.getElementById('app').offsetHeight;
            this.contentHeight = parseFloat(originalHeight);
        },
        // 侧边栏收缩与展开
        leftAsideChange() {
            this.leftAsideStatus = !this.leftAsideStatus;
            if (this.leftAsideStatus) {
                setTimeout(() => {
                    this.leftAsideClose = true;
                    this.$refs.topoMain.initRuler();
                }, 500);
            } else {
                setTimeout(() => {
                    this.leftAsideClose = false;
                    this.$refs.topoMain.initRuler();
                }, 500);
            }
        },
        rightAsideChange() {
            this.rightAsideStatus = !this.rightAsideStatus;
            if (this.rightAsideStatus) {
                setTimeout(() => {
                    this.rightAsideClose = true;
                    this.$refs.topoMain.initRuler();
                }, 500);
            } else {
                setTimeout(() => {
                    this.rightAsideClose = false;
                    this.$refs.topoMain.initRuler();
                }, 500);
            }
        },
        // 获取侧边高度
        calculateAsideHeight() {
            let originalHeight = document.getElementById('app').offsetHeight;
            this.asideHeight = parseFloat(originalHeight - 70);
        },
        // 工具点击事件
        handelClick(index) {
            if (index == 1) {
                //保存
                this.$refs.topoMain.handlePrintScadaData();
            } else if (index == 2) {
                //预览
                if (this.scadaType == 1) {
                    this.$modal.msgError(this.$t('scada.topo.editor.023345-37'));
                } else {
                    this.$refs.topoMain.screenPreview();
                }
            } else if (index == 3) {
                //复制
                this.$refs.topoMain.copyItem();
                this.$refs.topoMain.pasteItem();
            } else if (index == 4) {
                //删除
                this.$refs.topoMain.removeItem();
            } else if (index == 5) {
                //测试
                this.$refs.topoMain.alignClick();
            } else if (index == 6) {
                //图库
                this.isImgDialog = true;
            } else if (index == 7) {
                //全屏
                this.clickFullscreen();
            } else if (index == 8) {
                //设备绑定
                this.isDeviceBindDialog = true;
            } else if (index == 9) {
                //顺时针旋转
                this.$refs.topoProperties.transform(this.$t('scada.topo.editor.023345-27'));
            } else if (index == 10) {
                //逆时针旋转
                this.$refs.topoProperties.transform(this.$t('scada.topo.editor.023345-28'));
            } else if (index == 11) {
                //水平镜像
                this.$refs.topoProperties.transform(this.$t('scada.topo.editor.023345-29'));
            } else if (index == 12) {
                //垂直镜像
                this.$refs.topoProperties.transform(this.$t('scada.topo.editor.023345-30'));
            } else if (index == 13) {
                //置顶
                this.$refs.topoProperties.stack(this.$t('scada.topo.editor.023345-1'));
            } else if (index == 14) {
                //置底
                this.$refs.topoProperties.stack(this.$t('scada.topo.editor.023345-2'));
            } else if (index == 15) {
                //自定义角度
                this.$prompt('', this.$t('scada.topo.editor.023345-31'), {
                    confirmButtonText: this.$t('confirm'),
                    cancelButtonText: this.$t('cancel'),
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    inputValue: '0',
                    inputErrorMessage: this.$t('scada.topo.editor.023345-32'),
                    inputValidator: (value) => {
                        // 点击按钮时，对文本框里面的值进行验证
                        if (!value) {
                            return this.$t('scada.topo.editor.023345-33');
                        }
                        if (isNaN(value)) {
                            return this.$t('scada.topo.editor.023345-34');
                        }
                    },
                }).then(({ value }) => {
                    this.$refs.topoProperties.transform(this.$t('scada.topo.editor.023345-35'), value);
                });
            } else if (index == 16) {
                // 撤销
                this.$refs.topoMain.handleRevoke();
            } else if (index == 17) {
                // 恢复
                this.$refs.topoMain.handleRecovery();
            } else if (index == 18) {
                // 导入
                this.$refs.topoMain.handleImport();
            } else if (index == 19) {
                // 导出
                this.$refs.topoMain.handleDownLoad();
            } else if (index == 20) {
                // 分享
                this.isScadaShare = true;
            }
        },
        // 旋转
        handleCommand(command) {
            if (command == this.$t('scada.topo.editor.023345-4')) {
                this.handelClick(9);
            } else if (command == this.$t('scada.topo.editor.023345-5')) {
                this.handelClick(10);
            } else if (command == this.$t('scada.topo.editor.023345-6')) {
                this.handelClick(11);
            } else if (command == this.$t('scada.topo.editor.023345-7')) {
                this.handelClick(12);
            } else if (command == this.$t('scada.topo.editor.023345-8')) {
                this.handelClick(15);
            }
        },
        // 对齐
        handleCommandAlign(command) {
            this.$refs.topoMain.alignClick(command);
        },
        // 组合
        handleCommandMakeUP(command) {
            this.$refs.topoMain.makeUpClick(command);
        },
        // 锁定/解锁
        handleLock(command) {
            this.$refs.topoMain.handleLock(command);
        },
        // 锁定/解锁状态
        handleLockStatus(val) {
            this.isLock = val;
        },
        // 图库选择
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice();
            if (selectImage.length === 0) {
                this.$message({
                    message: this.$t('scada.topo.editor.023345-36'),
                    type: 'warning',
                });
                return;
            } else {
                selectImage.forEach((element) => {
                    this.$refs.topoMain.addImageData(this.baseApi + element.resourceUrl);
                });
                this.$message({
                    message: this.$t('addSuccess'),
                    type: 'success',
                });
                this.isImgDialog = false;
                this.$refs.topoSelectImage.clearChoice();
            }
        },
        // 撤销标志位
        revokeFlagClick(flag) {
            this.isRevoke = flag;
        },
        // 恢复标志位
        recoveryFlagClick(flag) {
            this.isRecovery = flag;
        },
        // 缩放
        handleCommandZoom(command) {
            this.zoom = command;
            this.$refs.topoMain.handleZoom(parseInt(command));
        },
        // 帮助
        handelHelpClick() {
            window.open('https://fastbee.cn/doc/');
        },
        // 右键菜单点击了
        menuClick(val) {
            if (val == this.$t('scada.topo.editor.023345-4')) {
                this.handelClick(9);
            } else if (val == this.$t('scada.topo.editor.023345-4')) {
                this.handelClick(10);
            } else if (val == this.$t('scada.topo.editor.023345-5')) {
                this.handelClick(11);
            } else if (val == this.$t('scada.topo.editor.023345-6')) {
                this.handelClick(12);
            } else if (val == this.$t('scada.topo.editor.023345-7')) {
                this.handelClick(15);
            } else if (val == this.$t('scada.topo.editor.023345-8')) {
                this.handelClick(15);
            } else if (val == this.$t('scada.topo.editor.023345-1')) {
                this.handelClick(13);
            } else if (val == this.$t('scada.topo.editor.023345-2')) {
                this.handelClick(14);
            } else if (val == this.$t('preview')) {
                this.handelClick(2);
            } else if (val == this.$t('save')) {
                this.handelClick(1);
            } else if (val == this.$t('scada.topo.editor.023345-20')) {
                this.handelClick(6);
            }
        },
        //  ctrl + com 滚动鼠标，放到
        handleLayerWheel(event) {
            if (event.deltaY < 0) {
                // 向上滚动（向着更大的值方向）
                if (this.zoom < 200) {
                    this.zoom = parseInt(this.zoom) + 25;
                    this.$refs.topoMain.handleZoom(parseInt(this.zoom));
                }
            } else {
                // 向下滚动（向着更小的值方向）
                if (this.zoom > 25) {
                    this.zoom = parseInt(this.zoom) - 25;
                    this.$refs.topoMain.handleZoom(parseInt(this.zoom));
                }
            }
        },
        // 按键按下监听
        handleKeyDown(event) {
            if (event.key === 'F12' || event.keyCode === 123) {
                this.$refs.topoMain.screenPreview();
                event.preventDefault(); // 阻止默认行为
            }
        },
        // 图层组件点击事件
        handleLayerItem(data) {
            const { item, index } = data;
            this.selectedIndex = index;
            if (index !== null) {
                this.$refs.topoMain.clickItem(item, index);
            }
        },
        // 编辑器组件选择
        handleSelectComponen(data) {
            const { index } = data;
            this.selectedIndex = index;
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-editor-wrap {
    margin: 0;
    padding: 0;
    height: calc(100vh - 84px);
    width: 100%;

    .container-wrap {
        height: 100%;
        background: #f1f3f4;

        .header-wrap {
            height: 70px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            border-bottom: 1px solid #dcdfe6;

            ::v-deep .el-button {
                margin-left: 10px;

                &:first-child {
                    margin: 0;
                }
            }

            ::v-deep .el-divider {
                height: 20px;
                margin: 0 0 0 10px;
            }

            .left-wrap,
            .right-wrap {
                display: flex;
                flex-direction: row;
                align-items: center;

                .btn-wrap {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 0 7px;

                    .name {
                        font-weight: 400;
                        font-size: 14px;
                        color: #323232;
                        line-height: 22px;
                    }
                }
            }
        }

        .aside-wrap {
            margin-bottom: 0;
            padding: 0;
            background: #ffffff;
        }

        .left-aside-open {
            width: 290px !important;
            transition: width 0.5s;
        }

        .right-aside-open {
            width: 270px !important;
            transition: width 0.5s;
        }

        .aside-close {
            width: 0px !important;
        }

        .main-wrap {
            position: relative;
            margin: 0;
            padding: 0;

            .left-aside-close-btn {
                position: absolute;
                left: 0;
                top: 50%;
                width: 14px;
                height: 50px;
                line-height: 50px;
                background-color: #c0c4cc8f;
                color: #fff;
                border-radius: 0 6px 6px 0;
                z-index: 1000;
                cursor: pointer;
                font-size: 14px;
            }

            .left-aside-close-btn:hover {
                color: #ccc;
                background-color: #f1f3f4;
            }

            .right-aside-close-btn {
                position: absolute;
                right: 0;
                top: 50%;
                width: 14px;
                height: 50px;
                line-height: 50px;
                background-color: #c0c4cc8f;
                color: #fff;
                border-radius: 6px 0 0 6px;
                z-index: 1000;
                cursor: pointer;
                font-size: 14px;
            }

            .right-aside-close-btn:hover {
                color: #ccc;
                background-color: #f1f3f4;
            }
        }
    }

    ::-webkit-scrollbar-thumb {
        background-color: #e1e1e1;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a5a2a2;
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        position: absolute;
    }

    ::-webkit-scrollbar-track {
        background-color: #fff;
    }
}
</style>
